<template>
  <el-dialog :title="title" class="editPass" width="350px" :visible.sync="isDial">
    <el-form :model="form" size="mini" ref="addUrbanArea" :rules="rules">
      <el-form-item label="区域名称" prop='name' label-width="80px">
        <el-input v-model="form.name" class="leftBorder" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="区域描述" prop='remark' label-width="80px">
        <!-- <el-input v-model="form.remarks" type="password" class="leftBorder" autocomplete="off" placeholder="请输入新密码"></el-input> -->
        <el-input type="textarea" :rows="2" placeholder="请输入备注" v-model="form.remark"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" size="mini" @click="saveArea">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { request } from "../../assets/request.js";
export default {
    data(){
        return{
            title:'添加区域',
            form:{
                name:"",
                remark:''
            },
            rules: {
                name: [
                    {
                        pattern: /\S/,
                        required: true,
                        message: "区域名称不能为空",
                        trigger: "blur"
                    }
                ]
            },
            cityInfo:'',
            isDial:false,
        }
    },
    created(){
        this.$root.$on("addUrbanArea",(type,data)=>{
            this.isDial=true
            // console.log(data)
            this.cityInfo=data
            if(type=='add'){
                this.title='添加区域'
            }else{
                console.log(type,data)
                let obj={}
                for(let i in type){
                    obj[i]=type[i]
                }
                this.form=obj
                this.title='编辑区域'
            }
        })
    },
    methods:{
        saveArea(){ //保存区域
            let that=this
            let cityInfo=that.cityInfo //城市信息
            let form=that.form;   // 区域信息
            this.$refs.addUrbanArea.validate(valid => {
                if(!valid){
                    return;
                }
                let url='city';
                let mat="POST";
                let params={
                    name:form.name,
                    parentId:cityInfo.id,
                    remark:form.remark,
                }
                if(this.title=="编辑区域"){
                    mat="PUT";
                    params.id=form.id;
                }
                request.ajaxPost({
                    url,
                    that,
                    params,
                    type:mat,
                    fn(res) {
                        console.log(res);
                        that.isDial=false
                        that.$root.$emit('saveArea','on')
                    }
                });
            })
        }
    }
};
</script>
<style lang="less" scoped>
.editPass{
    text-align: left;
    .dialog-footer{
        margin-top: -20px;
        .tips{
            float: left;
            font-size: 12px;
            color: #5E6D82;
            line-height: 28px;
        }
    }
    .info{
        margin-top: -20px;
        margin-bottom: 20px;
        span{
            margin-right: 20px;
            color: #5E6D82;
            font-size: 12px;
            font-weight: 600;
        }
    } 
    .el-dialog__body{
        padding: 0px 20px !important;
    }
}
</style>
